<template>
  <div class="container">
    <global-header :user="currentUser"></global-header>
    <loader v-if="isLoading"></loader>
    
    <router-view></router-view>
    <footer class="text-center py-4 text-secondary bg-light mt-6">
      <small>
        <ul class="list-inline mb-0">
          <li class="list-inline-item">© 2020 者也专栏</li>
          <li class="list-inline-item">课程</li>
          <li class="list-inline-item">文档</li>
          <li class="list-inline-item">联系</li>
          <li class="list-inline-item">更多</li>
        </ul>
      </small>
    </footer>
    <!-- <home></home> -->
    <!-- <Login></Login> -->
    <!-- <column-list :list="list"></column-list>
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3" >
        <label class="form-label">邮箱地址</label>
        <validate-input 
          :rules="emailRules" 
          v-model="emailVal" 
          placeholder="请输入邮箱地址" 
          type="text"
          ref="inputRef"
        >
        </validate-input>
      </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">密码</label>
      <validate-input 
          type="password"
          placeholder="请输入密码" 
          :rules="passwordRules" 
          v-model="passwordVal"
          >
        </validate-input>
    </div>
    <template #submit>
      <span class="btn btn-danger">Submit</span>
    </template>
  </validate-form> -->
  </div>
</template>

<script lang="ts">
import { defineComponent,computed, onMounted, watch} from 'vue'
import { useStore } from 'vuex'
import 'bootstrap/dist/css/bootstrap.min.css'
// import ColumnList, { ColumnProps } from './components/ColumnList.vue'
// import ValidateInput ,{ RulesProp } from './components/ValidateInput.vue'
// import ValidateForm from './components/ValidateForm.vue'
import GlobalHeader/* ,{ UserProps } */ from './components/GlobalHeader.vue'
import Loader from './components/Loader.vue'
// import Message from './components/Message.vue'
import createMessage from './components/createMessage'
import { GlobalDataProps } from './store'
import axios from 'axios'
// import Home from "./views/Home.vue"
// import Login from "./views/Login.vue"
/* const currentUser:UserProps = {
  isLogin:false,
  name:'viking'
} */
//网上找的好用的正则
// const emailReg = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
/* const testData:ColumnProps[] = [
  {
    id: 1,
    title: 'test1的专栏',
    description: '这是的test1专栏，有一段非常有意思的简介，可以更新一下欧',
    avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
  },
  {
    id: 2,
    title: 'test2的专栏',
    description: '这是的test2专栏，有一段非常有意思的简介，可以更新一下欧',
    avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
  }, {
    id: 3,
    title: 'test1的专栏',
    description: '这是的test1专栏，有一段非常有意思的简介，可以更新一下欧',
    //avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
  },
  {
    id: 4,
    title: 'test2的专栏',
    description: '这是的test2专栏，有一段非常有意思的简介，可以更新一下欧',
    avatar: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5ee22dd58b3c4520912b9470.jpg?x-oss-process=image/resize,m_pad,h_100,w_100'
  }
] */

export default defineComponent({
  name: 'App',
  components: {
    // ColumnList,
    GlobalHeader,
    Loader,
    // Message
    // ValidateInput,
    // ValidateForm
    // Home
    // Login
  },
  setup () {
    const store = useStore();
    const currentUser = computed(()=> store.state.user);
    const isLoading = computed(() => store.state.loading);
    const token = computed(() => store.state.token);
    const error = computed(() => store.state.error)
    onMounted(() => {
      const message = createMessage('check here', 'success');
      setTimeout(() => {
        message.destory()
      },2000)
      if (!currentUser.value.isLogin && token.value) {
        axios.defaults.headers.common.Authorization = `Bearer ${token.value}`
        store.dispatch('fetchCurrentUser')
      }
    })
   watch(() => error.value.status, () => {
      const { status, message } = error.value
      if (status && message) {
        createMessage(message, 'error')
      }
    })
    /* const inputRef = ref<any>()//泛型设置为any，一会拿到组件的实例，不去写它的类型
    const emailVal = ref('123@test.com')
    const emailRules: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const passwordVal = ref('123')
    const passwordRules:RulesProp = [
      { type:'required',message:'密码不能为空' }
    ]
    const emailRef = reactive({
      val: '',
      error: false,
      message:''
    })
    //校验
    const validateEmail = () =>{
      if(emailRef.val.trim() === ''){
        emailRef.error = true;
        emailRef.message = 'can not be empty';
      }else if(!emailReg.test(emailRef.val)){
        emailRef.error = true;
        emailRef.message = 'should be valid email';
      }
    }
    //表单提交方法
    const onFormSubmit = (result:boolean) =>{
      console.log('result',result)
    } */
    //返回出去
    return {
      // list: testData,
      currentUser,
      isLoading,
      error
      /* emailRef,
      validateEmail,
      emailRules,
      emailVal,
      passwordVal,
      passwordRules,
      onFormSubmit,
      inputRef */
    }
  }
})
</script>

<style>

</style>
